import React from 'react'
import { Row, Col, Avatar, Typography } from 'antd'; // 确保导入了所有需要的组件

const { Title } = Typography;

function PlatformBasicInfo({ user }) {
  // 如果没有用户数据，显示加载提示
  if (!user) {
    return <div style={{ textAlign: 'center', padding: '50px 0' }}>请选择要查看的用户</div>;
  }

  // 性别转换函数
  const getGender = (gender) => {
    if (gender === 1) return '男';
    if (gender === 2) return '女';
    return '未知';
  };

  // 格式化日期时间
  const formatDate = (dateString) => {
    if (!dateString) return '未设置';
    try {
      return new Date(dateString).toLocaleString('zh-CN');
    } catch (e) {
      return dateString;
    }
  };

  return (
      <>
        <Row>
          <Col span={3}>
            <Avatar
                src={user.avatar || "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"}
                size={64}
            />
          </Col>
          <Col span={7} className="base-info">
          <span>
            用户ID：<span>{user.id || '未设置'}</span>
          </span>
            <span>
            用户昵称：<span>{user.nickName || '未设置'}</span>
          </span>
          </Col>
          <Col span={7} className="base-info">
          <span>
            注册渠道：<span>{user.providerType || '未设置'}</span>
          </span>
            <span>
            注册时间：<span>{formatDate(user.regTime)}</span>
          </span>
          </Col>
          <Col span={7} className="base-info">
          <span>
            账户状态：<span>{user.statusDesc || '未设置'}</span>
          </span>
            <span>
            会员等级：<span style={{ color: '#FF0000' }}>黄金</span>
          </span>
          </Col>
        </Row>
        <Typography.Title className="base-info-bg" level={5}>
          基础信息
        </Typography.Title>
        <Row>
          <Col span={7} className="base-info">
          <span>
            真实姓名：<span>{user.realName || '未设置'}</span>
          </span>
            <span style={{ marginBottom: 12 }}>
            联系方式：<span>{user.phone || '未设置'}</span>
          </span>
            <span>
            婚姻：<span>已婚</span>
          </span>
          </Col>
          <Col span={10} className="base-info">
          <span>
            性别：<span>{getGender(user.gender)}</span>
          </span>
            <span style={{ marginBottom: 12 }}>
            常用地址：<span>{user.address || '北京市海淀区中鼎大厦'}</span>
          </span>
            <span>
            邮箱：<span>{user.email || '未设置'}</span>
          </span>
          </Col>
          <Col span={7} className="base-info">
          <span>
            生日：<span>{user.birthday || '1998-12-31'}</span>
          </span>
            <span>
            职业：<span>程序员</span>
          </span>
          </Col>
        </Row>
        <Typography.Title className="base-info-bg" level={5}>
          平台属性
        </Typography.Title>
        <Row>
          <Col span={7} className="base-info">
          <span>
            注册日期：<span>{formatDate(user.regTime)}</span>
          </span>
            <span>
            激活日期：<span>{formatDate(user.activeTime)}</span>
          </span>
          </Col>
          <Col span={10} className="base-info">
          <span>
            最近登录时间：<span>{formatDate(user.lastLogTime)}</span>
          </span>
            <span>
            用户来源：<span>好友邀请</span>
          </span>
          </Col>
        </Row>
      </>
  )
}

export default PlatformBasicInfo
